import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NgsFormOption, NgsPanelOption } from 'src/base/common/ngs';
import { NgsForm } from 'src/base/common/ngs/form/ngs-form-module';
import { NgsTable } from 'src/base/common/ngs/table/ngs-table-module';
import { NgsTabColumnBadgeOption, NgsTableOption } from 'src/base/common/ngs/table/ngs-table.config';
import { HttpService } from 'src/base/utlis/http.config';
import { CmdData } from 'src/core/module/CmdSignModel';
import { OrdersModel } from 'src/core/module/orders/orders.model';
import { OrdersCmdCode } from 'src/module/module-orders/core';
import { OrdersService } from 'src/module/module-orders/core/service/OrdersService';


@Component({
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class OrdersListComponent implements OnInit {

  constructor(
    private message: NzMessageService,
    private router: Router,
    private http: HttpService,
    private modal: NzModalService
  ) { }

  ordersService: OrdersService = new OrdersService(this.http);
  @ViewChild('myForm') myForm: NgsForm | any;
  @ViewChild('myTable') myTable: NgsTable | any;

  panelOption: NgsPanelOption = {
    crumbs: [
      {
        text: '订单列表'
      }
    ],
    buttons: [
      {
        text: '导出',
        action: () => {

        }
      }
    ]
  }

  payTypeList = ["WX_PAY", "INTEGRAL_PAY", "CASH_PAY"]


  formOption: NgsFormOption = {
    showSearch: true,
    column: 4,
    components: [
      { label: '订单编号', property: 'title', comp: 'NgsFormInput', placeHolder: '订单编号' }
    ]
  }

  cmdSign: CmdData = {
    cmdCode: OrdersCmdCode.ORDERS_LIST
  };

  statusTemplate: Array<NgsTabColumnBadgeOption> = [
    { status: 'UNPAID', tagLabel: '待付款', tagColor: 'yellow' },
    { status: 'ACCOUNT_PAID', tagLabel: '已付款', tagColor: 'orange' },
    { status: 'SUCCESS', tagLabel: '已完成', tagColor: 'blue' },
    { status: 'CANCEL', tagLabel: '已取消', tagColor: '#999' }
  ]

  tableOption: NgsTableOption = {
    dataSource: this.cmdSign,
    selections: [
      { text: '全部', value: null },
      { text: '待付款', value: 'UNPAID' },
      { text: '已付款', value: 'ACCOUNT_PAID' },
      { text: '已完成', value: 'SUCCESS' },
      { text: '已取消', value: 'CANCEL' }
    ],
    table: {
      columns: [
        {
          title: '商户', property: 'mch',
          info: (item: OrdersModel) => {
            return item.mchBO?.title;
          }
        },
        {
          title: '订单编号', property: 'orderNo',
          click: (item: OrdersModel) => {
            this.router.navigateByUrl(`orders/details/${item.id}`)
          },
          tagOptin: [
              {
                tagColor:(item:OrdersModel) => {
                  if (item.payType === 'WX_PAY') {
                    return "green";
                  }
                  if (item.payType === 'INTEGRAL_PAY') {
                    return "blue";
                  }
                  if (item.payType === 'CASH_PAY') {
                    return "orange";
                  }
                  return "";
                },
                tagLabel:(item:OrdersModel) => {
                  if (item.payType === 'WX_PAY') {
                    return "微信支付";
                  }
                  if (item.payType === 'INTEGRAL_PAY') {
                    return "积分支付";
                  }
                  if (item.payType === 'CASH_PAY') {
                    return "现金支付";
                  }
                  return "";
                }
              }
          ],
        },
        {
          title: '下单会员', property: 'orderMember',
          click: (item: OrdersModel) => {

          },
          info: (item: OrdersModel) => {
            return item.orderMemberBO.name;
          },
          subOption: (item: OrdersModel) => {
            return item.orderMemberBO.mobile;
          },
        },
        { title: '订单金额', property: 'ordersAmount', width: 80,
          subOption:(item:OrdersModel) => {
            return "分账金额:" + item.superiorAmount
          }
        },
        { title: '状态', property: 'status', badgeOption: this.statusTemplate },

        { title: '下单时间', property: 'createdDate', width: '120' },
        { title: '付款时间', property: 'createdDate', width: '120' }
      ],
      op: {
        width: 200,
        groupButtons: [
          {
            text: '编辑',
            buttons: [
              {
                text: '删除商品',
                action: (item: any) => {
                  this.modal.create({
                    nzTitle: '是否删除该订单',
                    nzContent: '删除后无法恢复！',
                    nzClosable: false,
                    nzOnOk: () => {
                      this.ordersService.ordersDel(item).then(res => {
                        this.message.success("删除完成");
                        this.myTable.search();
                      });
                    }
                  });
                }
              },
            ],
          }
        ]
      },

    }
  }

  ngOnInit() {
  }

  onSearch(event: any) {
    this.myTable.search(event);
  }
}
